<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="300"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Styles ---
        ctx.fillStyle = 'black';
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        const mainFontSize = 22;
        const subFontSize = 14;
        const baseFont = `italic ${mainFontSize}px Times New Roman`;
        const subFont = `italic ${subFontSize}px Times New Roman`;

        // --- Coordinates ---
        const yAxis = 150;
        const yVel = 120;
        const yTopRow = 80;
        const yProps = 210;
        const yConditions = 245;

        const xParticle2 = 180;
        const xParticle1 = 220;
        const particleRadius = 4;

        // --- Draw x-axis ---
        ctx.font = baseFont;
        drawArrow(ctx, 40, yAxis, 510, yAxis);
        ctx.fillText('x', 520, yAxis + 8);

        // --- Draw Particles ---
        // Particle 2
        ctx.beginPath();
        ctx.arc(xParticle2, yAxis, particleRadius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('2', xParticle2 - 25, yAxis - 10);

        // Particle 1
        ctx.beginPath();
        ctx.arc(xParticle1, yAxis, particleRadius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('1', xParticle1 - 5, yAxis - 10);

        // --- Draw Electric Field E ---
        drawArrow(ctx, 300, yTopRow, 480, yTopRow);
        ctx.fillText('E', 490, yTopRow + 8);

        // --- Draw Velocity Vectors ---
        // v1
        drawArrow(ctx, xParticle1, yVel, xParticle1 + 100, yVel);
        ctx.font = baseFont;
        ctx.fillText('v', xParticle1 + 105, yVel + 8);
        ctx.font = subFont;
        ctx.fillText('1', xParticle1 + 115, yVel + 12);

        // v2
        drawArrow(ctx, xParticle2 - 40, yVel, xParticle2 + 20, yVel);
        ctx.font = baseFont;
        ctx.fillText('v', xParticle2 - 70, yVel + 8);
        ctx.font = subFont;
        ctx.fillText('2', xParticle2 - 60, yVel + 12);

        // --- Draw Text Labels ---

        // Inequality v2 < v1
        ctx.font = baseFont;
        ctx.fillText('v', 150, yTopRow + 8);
        ctx.font = subFont;
        ctx.fillText('2', 160, yTopRow + 12);
        ctx.font = baseFont;
        ctx.fillText('< v', 172, yTopRow + 8);
        ctx.font = subFont;
        ctx.fillText('1', 202, yTopRow + 12);

        // Particle Properties
        // Particle 2 properties
        ctx.font = baseFont;
        ctx.fillText('m, q', xParticle2 - 35, yProps);
        ctx.font = subFont;
        ctx.fillText('2', xParticle2 - 5, yProps + 5);

        // Particle 1 properties
        ctx.font = baseFont;
        ctx.fillText('m, q', xParticle1 + 25, yProps);
        ctx.font = subFont;
        ctx.fillText('1', xParticle1 + 55, yProps + 5);

        // Charge conditions
        let currentX = 130;
        // q2 > 0
        ctx.font = baseFont;
        ctx.fillText('q', currentX, yConditions);
        ctx.font = subFont;
        ctx.fillText('2', currentX + 10, yConditions + 5);
        ctx.font = baseFont;
        ctx.fillText('> 0,', currentX + 20, yConditions);
        currentX += 70;

        // q1 > 0
        ctx.font = baseFont;
        ctx.fillText('q', currentX, yConditions);
        ctx.font = subFont;
        ctx.fillText('1', currentX + 10, yConditions + 5);
        ctx.font = baseFont;
        ctx.fillText('> 0,', currentX + 20, yConditions);
        currentX += 70;

        // q2 > q1
        ctx.font = baseFont;
        ctx.fillText('q', currentX, yConditions);
        ctx.font = subFont;
        ctx.fillText('2', currentX + 10, yConditions + 5);
        ctx.font = baseFont;
        ctx.fillText('> q', currentX + 22, yConditions);
        ctx.font = subFont;
        ctx.fillText('1', currentX + 52, yConditions + 5);
    </script>
</body>
</html>